<template>
	<view :data-theme="theme">
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">应开发票信息</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">申请类型</u-col>
				<u-col span="8">
					<span v-if="invoceData.message.invoiceType == 1">普通发票</span>
					<span v-if="invoceData.message.invoiceType == 2">电子发票</span>
				</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >申请类型</view>
				<view class="item_content_right">
					<span v-if="invoceData.message.invoiceType == 1">普通发票</span>
					<span v-if="invoceData.message.invoiceType == 2">电子发票</span>
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">申请总金额</u-col>
				<u-col span="8"><u--text mode="price" :text="invoceData.invoiceAmount"></u--text></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >申请总金额</view>
				<view class="item_content_right">
					￥{{invoceData.invoiceAmount}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">发票抬头</u-col>
				<u-col span="8">{{invoceData.message.invoiceContent}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >发票抬头</view>
				<view class="item_content_right">
					{{invoceData.message.invoiceContent}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">纳税人识别号</u-col>
				<u-col span="8">{{invoceData.message.invoiceNumber}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >纳税人识别号</view>
				<view class="item_content_right">
					{{invoceData.message.invoiceNumber}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">注册电话</u-col>
				<u-col span="8">{{invoceData.message.relevancePhone}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >注册电话</view>
				<view class="item_content_right">
					{{invoceData.message.relevancePhone}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">注册地址</u-col>
				<u-col span="8">{{invoceData.message.relevancePlace}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >注册地址</view>
				<view class="item_content_right">
					{{invoceData.message.relevancePlace}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">开户银行</u-col>
				<u-col span="8">{{invoceData.message.bank}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >开户银行</view>
				<view class="item_content_right">
					{{invoceData.message.bank}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">银行账户</u-col>
				<u-col span="8">{{invoceData.message.bankAccount}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >银行账户</view>
				<view class="item_content_right">
					{{invoceData.message.bankAccount}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:20px">
				<u-col span="4">商品明细</u-col>
				<u-col span="8"><span style="color:rgb(254, 92, 45);" @click="show = true">查看详情></span></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left" >商品明细</view>
				<view class="item_content_right">
					<span style="color:rgb(254, 92, 45);" @click="show = true">查看详情></span>
				</view>
			</view>
		</view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">上传发票</view>

			<view class="auto" style="margin: 0 auto;text-align: center;">
				<u-upload style="flex: none;" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
					:maxCount="1">
					<button :style="{color: bgColor,borderColor:bgColor}"
						style="border: 1px solid;line-height: 40px;width: 350px;">
						<uni-icons type="upload" size="22" :color="bgColor"></uni-icons>
						上传
					</button>
				</u-upload>
			</view>


			<!-- <u-button icon="upload"  text="上传" style="font-weight: bold;border-radius: 10px;" :color="bgColor" plain ></u-button> -->
		</view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title" style="margin-bottom: 20px;">补充说明</view>
			<u--textarea v-model="textarea" style="background-color: #f5f5f5 ;" placeholder="请输入补充内容" count
				maxlength="300" height="70"></u--textarea>
		</view>
		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;z-index: 999;">
			<!-- <u-button @click="updateInvoce" style="font-weight: bold;border-radius: 10px;" :color="bgColor" size="large"
				type="primary" text="提交"></u-button> -->
			<button @click="updateInvoce" class="bg_color"
				style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor">提交</button>
		</view>
		<!-- 弹出层 -->
		<!-- <view class="popup"> -->
			<!-- <u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open" closeable>
				<view style="padding: 10px 10px 10px 10px;">
					<h3 class="text_top" style="text-align: center;font-weight: bold;">商品明细</h3>
					<view class="card">
						<view style="font-weight: 700;margin: 10px 0;">
							所有商品统计
						</view>
						<u-row>
							<u-col span="3">商品总数：</u-col>
							<u-col span="9">{{goodsData.length}}</u-col>
						</u-row>
						<u-row>
							<u-col span="6">所有商品含税总价（元）：</u-col>
							<u-col span="6"><u--text mode="price" :text="invoceData.invoiceAmount"></u--text></u-col>
						</u-row>
					</view>

					<view class="card">
						<view style="font-weight: 700;margin: 20px 0;">
							商品明细
						</view>
						<table>
							<tr>
								<th>商品名称</th>
								<th>规格</th>
								<th>数量</th>
								<th>单价（元）</th>
								<th>含税总价（元）</th>
							</tr>
							<tr v-for="(item,index) in goodsData" :key="index">
								<td style="width: 110px;overflow: hidden;">{{item.shopName}}</td>
								<td style="margin:0 10px;">{{item.merchandiseModel}}</td>
								<td style="margin:0 10px;">{{item.merchandiseNum}}</td>
								<td style="margin:0 10px;">{{item.merchandiseMoney}}</td>
								<td style="margin:0 10px;">{{item.merchandiseAmount}}</td>
							</tr>
						</table>
					</view>

				</view>
			</u-popup> -->
			<tui-drawer mode="bottom" :visible="show" @close="close" @open="open" closeable>
				<view class="ensure" style="padding: 10px 10px 10px 10px;">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						<h3 style="text-align: center;font-weight: bold;">商品明细</h3>
					</view>

					<view class="card">
						<view style="font-weight: 700;margin: 10px 0;">
							所有商品统计
						</view>
						<!-- <u-row>
							<u-col span="3">商品总数：</u-col>
							<u-col span="9">{{goodsData.length}}</u-col>
						</u-row> -->
						<view style="display: flex;justify-content: center;">
							<view style="flex: 1;">商品总数：</view>
							<view style="flex: 1;">{{goodsData.length}}</view>
						</view>
						<!-- <u-row>
							<u-col span="6">所有商品含税总价（元）：</u-col>
							<u-col span="6"><u--text mode="price" :text="invoceData.invoiceAmount"></u--text></u-col>
						</u-row> -->
						<view style="display: flex;justify-content: center;">
							<view style="flex: 1;">所有商品含税总价（元）：</view>
							<view style="flex: 1;">￥{{invoceData.invoiceAmount}}</view>
						</view>
					</view>

					<view class="card">
						<view style="font-weight: 700;margin: 20px 0;">
							商品明细
						</view>
						<table>
							<tr>
								<th>商品名称</th>
								<th>规格</th>
								<th>数量</th>
								<th>单价（元）</th>
								<th>含税总价（元）</th>
							</tr>
							<tr v-for="(item,index) in goodsData" :key="index">
								<td style="width: 110px;overflow: hidden;">{{item.shopName}}</td>
								<td style="margin:0 10px;">{{item.merchandiseModel}}</td>
								<td style="margin:0 10px;">{{item.merchandiseNum}}</td>
								<td style="margin:0 10px;">{{item.merchandiseMoney}}</td>
								<td style="margin:0 10px;">{{item.merchandiseAmount}}</td>
							</tr>
						</table>
					</view>
				</view>
			</tui-drawer>

		<!-- </view> -->
	</view>
</template>

<script>
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		getInvoceApi,
		updateInvoceSuccessApi,
		getInvMerchandiseApi
	} from '@/api/invoce.js'
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	import animationType from '@/utils/animationType.js'
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				invoceId: '',
				invoceData: {
					message: {},
				},
				textarea: '',
				updateForm: {
					invoiceExplain: '',
					invoiceFile: '', //照片
					invoiceIdList: [], //必传
					invoiceTitle: '', //必传
					invoiceType: '', //必传
					mailCompany: '',
					mailNumber: '',
					overAmount: '', //必传
				},
				show: false,
				goodsData: [{
					shopName: '',
				}],
				fileList1: [], //发票封面图
				imageList1: [], //
			};
		},
		onLoad(row) {
			this.invoceId = row.id
			this.bgColor = setThemeColor();
			this.getInvoce();
		},
		methods: {
			getInvoce() {
				getInvoceApi({
					invoceId: this.invoceId
				}).then((res) => {
					this.invoceData = res.data;
					this.getGoodsData();
				})
			},
			updateInvoce() {
				let arr = [];
				arr.push(this.invoceData.id);
				this.updateForm.invoiceIdList = arr;
				this.updateForm.invoiceTitle = this.invoceData.invoiceContent;
				this.updateForm.invoiceType = this.invoceData.message.invoiceType;
				this.updateForm.overAmount = this.invoceData.invoiceAmount;
				updateInvoceSuccessApi(this.updateForm).then((res) => {
					// console.log('提交',res)
					uni.navigateBack(1);
				})
			},
			open() {
				console.log('open')
			},
			close() {
				this.show = false
				console.log('close')
			},
			getGoodsData() {
				let arr = [];
				arr.push(this.invoceData.id);
				getInvMerchandiseApi(arr).then((res) => {
					this.goodsData = res.data;
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result == null) {
						uni.showToast({
							title: "上传失败",
							icon: "none",
						})
						this.deletePic(event.index, 1);
						break;
					}
					let newStatus = {
						status: 'success',
						message: '上传成功',
						url: result,
					}
					this.updateForm.invoiceFile = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, newStatus))
					fileListLen++
				}
			},
			uploadFilePromise(filePath) {
				return this.$util.uploadFilePromise(filePath, {
					url: 'upload/image',
					name: "multipart", //固定 multipart
					model: "invoice", //模块 用户user,商品product,微信wechat,news文章,发票invoice,
					pid: 9, //分类ID 0编辑器,1商品图片,2拼团图片,3砍价图片,4秒杀图片,5文章图片,6组合数据图,7前台用户,8微信系列,9发票图片
					count: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.title {
		font-size: 16px;
		margin: 20rpx 0;
	}

	.popup {
		margin: 20rpx 0;
		height: 50%;
		background-color: #f5f5f5;
	}

	.text_top {
		margin: 20rpx 0;
		font-weight: 500;
		font-size: 16px;
	}

	table {
		width: 25em;
	}

	table td {
		// word-break: keep-all;
		//    white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background-color: #f5f5f5;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}
	}
	
	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
		
		.item_content_left{
			flex: 1;
		}
		
		.item_content_right{
			flex: 2;
		}
	}

	// table {
	// 	border-collapse: collapse;
	// 	width: 55em;
	// 	table-layout: fixed;
	// 	/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
	// }

	// table td {
	// 	position: relative;
	// 	/*width: 80px;*/
	// 	height: 25px;
	// 	text-align: center;
	// 	font-size: 12px;
	// 	font-weight: normal;

	// 	width: 100%;
	// 	word-break: keep-all;
	// 	/* 不换行 */
	// 	white-space: nowrap;
	// 	/* 不换行 */
	// 	overflow: hidden;
	// 	/* 内容超出宽度时隐藏超出部分的内容 */
	// 	text-overflow: ellipsis;
	// 	/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
	// }

	// table td:hover {
	// 	overflow: visible;
	// 	/* 鼠标放上去显示全部文字 */
	// }
</style>